<template>
	<!-- self点击自己触发 -->
	<div class="dialog_container" v-show="visible">
		<div class="mask show" v-if="modal" @click="close(true)"></div>
		<div class="dialog show" :class="{customClass}" :style="{width:width,top:top}">
			<div class="zh-header">
				<slot name="title">
					<span class="dialog_title">{{title}}</span>
				</slot>
				<button class="dialog_headerbtn">
					<i class="zh-iconfont zh-icon-close" @click="close()"></i>
				</button>
			</div>
			<div class="dialog_body">
				<!-- 默认插槽 -->
				<slot></slot>
			</div>
			<div class="dialog_footer" v-if="$slots.footer">
				<slot name="footer"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'zh-dialog',
		// 组件参数 接收来自父组件的数据
		props: {
			// dialog的标题
			title: {
				type: String,
				default: "提示"
			},
			// 宽
			width: {
				type: String,
				default: "50%"
			},
			// 高 margin-top
			top: {
				type: String,
				default: '20%'
			},
			// 是否显示dialog
			visible: {
				type: Boolean,
				default: false
			},
			// 自定义类名
			customClass: String,
			// 是否可以通过点击遮罩层关闭dialog
			closeOnClickModal: {
				type: Boolean,
				default: true,
			},
			// 是否显示关闭按钮
			showClose: {
				type: Boolean,
				default: true,
			},
			// 是否显示遮罩层
			modal:{
				type:Boolean,
				default:true
			}
		},
		// 组件方法
		methods: {
			close(isMask) {
				// 判断是否通过遮罩层关闭  如果不是  执行下面
				if (!isMask || this.closeOnClickModal) {
					// 点击关闭的时候更新
					this.$emit("update:visible", !this.visible);
					// 关闭的方法
					this.$emit("closed")
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../variable';

	.mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: auto;
		margin: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 999;

		&.show {
			animation: show-mask 0.3s linear forwards;
		}
	}

	.dialog {
		position: fixed;
		left: 50%;
		top: 50%;
		background-color: $white;
		border-radius: 3px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
		box-sizing: border-box;
		transform: translate(-50%);
		z-index: 1000;
		width: 30%;

		.zh-header {
			padding: 20px 20px 10px;

			.dialog-title {
				line-height: 24px;
				font-size: 18px;
				color: #303133;
			}

			.dialog_headerbtn {
				position: absolute;
				top: 20px;
				right: 20px;
				padding: 0;
				background: transparent;
				border: none;
				outline: none;
				cursor: pointer;
				font-size: 16px;

				.zh-icon-close {
					color: #909399;
					&:hover{
						color: $blue;
					}
				}
			}
		}

		.dialog_body {
			padding: 30px 20px;
			color: #606266;
			font-size: 14px;
			word-break: break-all;
		}

		.dialog_footer {
			display: flex;
			justify-content: flex-end;
			padding: 10px 20px 20px;
			box-sizing: border-box;
		}
		&.show{
			animation: show-dialog 0.3s linear forwards;
		}
	}


	@keyframes show-dialog {
		0% {
			opacity: 0;
			margin-top: 0;
		}

		100% {
			opacity: 1;
			margin-top: 30px;
		}
	}

	@keyframes show-mask {
		0% {
			opacity: 0.5;
		}

		100% {
			opacity: 1;
		}
	}
</style>
